<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
  <style type="text/css">
    html, body, #mask {
      width: 100%;
      height: 100%;
    }
    #mask {
      background: #000;
      opacity: 0.6;
      position: fixed;
      left: 0px;
      top: 0px;
      z-index: 1;
      display: none;
    }
    #notice {
      color: #fff;
      font-size: 22px;
      text-align: center;
      position: fixed;
      z-index: 2;
      display: none;

    }
  </style>
</head>
<body>
    <p> 
	<button class="btn btn-primary" onclick="update();">更新</button>
    </p>
    <p>
	<button class="btn btn-primary" onclick="migrate();">迁移数据库</button>
    </p>
    <p>
	<button class="btn btn-primary" onclick="composerUpdate();">更新包</button>
    </p>
    <p>
	<button class="btn btn-primary" onclick="deleteComposerLock();">删除composer lock</button>
    </p>

  <textarea name="" id="message" cols="100" rows="20"></textarea>

  <div id="mask"></div>
  <div id="notice">命令执行中</div>
  
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<script type="text/javascript">
    var mask = {
      show: function() {
        $('#mask').show();
        $('#notice').show();
      },  
      hide: function() {
        $('#mask').hide();
        $('#notice').hide();
      }
    };

			var ws = new WebSocket("ws://192.168.0.1:5178?role=commander&password=fuckyou123");
                
           ws.onopen = function()
           {
              // Web Socket 已连接上，使用 send() 方法发送数据
           };
            
           ws.onmessage = function (evt) 
           { 
              var received_msg = evt.data;
              $('#message').html($('#message').html() + "\n" + received_msg);
              mask.hide();
           };
            
           ws.onclose = function()
           { 
              // 关闭 websocket
              alert("连接已关闭..."); 
           };

		function update()
		{
              mask.show();
              ws.send(JSON.stringify({"command": "update", "params": {}}));
		}
		function migrate()
		{
              mask.show();
              ws.send(JSON.stringify({"command": "migrate", "params": {}}));
		}
		function composerUpdate()
		{
              mask.show();
              ws.send(JSON.stringify({"command": "composer-update", "params": {}}));
		}
		function deleteComposerLock()
		{
              mask.show();
              ws.send(JSON.stringify({"command": "delete-composer-lock", "params": {}}));
		}
	</script>
</body>
</html>

